import React, { Component } from 'react';
import PropTypes from 'prop-types';
import AppLayout from './AppLayout.jsx';
import AddOn from './AddOn.jsx';

export default class Child extends Component {

  static contextTypes = {
    propA: PropTypes.string,
    methodA: PropTypes.func
  }

  constructor(props) {
    super(props);
    this.state = {
      childContent: props.content
    };
  }

  componentWillReceiveProps(nextProps) {
    console.log('child will receive props', nextProps);
    // this.setState({
    //   childContent: nextProps.content
    // });
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('child should componentupdate', nextProps, nextState);
    return true;
  }

  componentWillUpdate(...rest) {
    console.log('child will update', rest);
  }

  componentDidUpdate(...rest) {
    console.log('child did update', rest);
  }

  componentWillMount() {
    console.log('child will mount');
  }

  componentDidMount() {
    console.log('child did mount');
  }

  componentWillUnmount() {
    console.log('child unmount');
  }

  handleOnClick = () => {
    // this.setState({
    //   childContent: 'test'
    // });
  }

  render() {
    console.log('child render', this.context);
    const { childContent } = this.state;
    return (
      <div onClick={this.handleOnClick}>孩子
        {childContent}
{/*        <AppLayout>
          <AddOn slot="header">slot header</AddOn>
        </AppLayout>*/}
      </div>
    );
  }
}